<template>
    <div class="input">
       <div class="phone">
         
           <div class="input-box">
               <input  ref="phone" v-model="phone" type="text" class="phone-input" placeholder="请输入手机号" maxlength="11">
               <cube-tip ref="tip" direction="bottom" style="left:.05rem;top:-1.3rem;">{{ phoneTipText }}</cube-tip>
           </div>
           <button class="get-btn" v-if="showGetMessage" @click="sendMessage" type="number">{{ getText }}</button>
       </div>
       <div class="phone">
           
           <div class="input-box">
               <input  ref="message" type="text" class="phone-input" placeholder="请输入四位有效验证码" maxlength="4">
               <cube-tip ref="tipMessage" direction="bottom" style="left:.05rem;top:-1.3rem;">{{ messageTipText }}</cube-tip>
           </div>
       </div>
       <cube-button class="login-submit" @click="submits">注册/登录</cube-button>
       
    </div>
</template>

<script>
import { Style, Tip, Loading, Toast,Button } from 'cube-ui'
import axios from 'axios'
export default {
    name: 'LoginInput',
    data () {
        return {
            is_send: false,
            getText: "获取验证码",
            correctMessage: 1234,
            phoneTipText: '',
            messageTipText: '',
            phone: ''
        }
    },
    computed: {
        showGetMessage () {
            
            return this.phone.length === 11 ? true : false;
        }
    },
    methods: {
        Toast (txt, type, time) {
            var toast = this.$createToast({
                txt: txt,
                type: type,
                time: time
            });
            toast.show();
        },
        checkMessage (message, phone) {                //检验短信验证码格式以及是否正确
            if (message.length === 0) 
            {
                return new Promise((resolve, reject) => {
                    this.messageTipText = "验证码不能为空";
                    this.$refs.tipMessage.show();
                    resolve(false);
                });
            }

            return new Promise((resolve, reject) => {
                axios({
                    method: 'get',
                    url: '/enrolLogin',
                    params: {
                        messageCode: message,
                        phone: phone
                    }
                })
                .then(function (response) {
                    resolve(response.data);
                }, function (err) {
                    reject(err);
                });
            });
        },
        checkPhone () {                             //检验手机号码格式
            var phone = this.$refs.phone.value;
            if ((phone + '').length === 0) {
                this.phoneTipText = "请输入手机号";
                this.$refs.tip.show()
                return false
            }

            function check(phone) {
                var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!myreg.test(phone)) {
                    return false;
                } else {
                    return true;
                }
            }
            
            phone = Number(phone);
            
            if (phone !== phone || !check(phone)) {
                this.phoneTipText = "手机号码不正确";
                this.$refs.tip.show()
                return false;
            }
            return true;
        },
        submits () {                                 //点击提交
       
            var message = this.$refs.message.value;
            var phone = this.$refs.phone.value;
            var _this = this;
            if (!this.checkPhone(phone)) return false;
            if (!message) return false;
            this.Toast('Loading...', 'loading', 1000);
            this.checkMessage(message, phone).then(function (value) {
                let datas = value;
                console.log(datas)
                if (datas.status !== 0) return false;   
                let cookie = datas.cookie;
                //是否支持本地存储，已存储cookie
                if (window.localStorage)
                {
                    window.localStorage.gazi_token = cookie;
                }
                
                if (datas.data !== null) {
                   window.valueBus.duty = datas.data;
                }
                else {
                    window.valueBus.duty = null;
                }

                
                 _this.$router.replace({
                    path: '/'
                })
            }, function (error) {
                console.log(error)
            });
        },
        sendMessage () {                            //点击获取验证码
            var phone = this.$refs.phone.value;
            phone = Number(phone);
            if (!this.checkPhone(phone)) return false;
            this.getMessageLimit(phone);
        },
        requestSendMessage (phone) {                //发送请求获取验证码
            axios({
                method: 'get',
                url: '/getMessageCode',
                params: {
                    phone: phone
                }
            })
            .then (function (response) {
                console.log(response);
            }, function (err) {
                console.log(err);
            })
        },
        getMessageLimit(phone) {                    //获取验证码限制                   
            const _this = this;
            if (this.is_send) return false;
            this.requestSendMessage(phone);
            this.Toast('已发送', 'correct', 1500);
            this.is_send = true;
            this.timerCount = 59;
            this.messageTimer = setInterval(() => {
                _this.getText = "已发送(" + _this.timerCount + " s)";
                _this.timerCount --;
                if (_this.timerCount === -1) {
                    clearInterval(_this.messageTimer);
                    _this.timerCount = 59;
                    _this.is_send = false;
                    _this.getText = "获取验证码"
                    return true;
                }
            }, 1000);
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import "~styles/common.styl";
    .input
        width 85%
        margin 0 auto
        margin-top 1rem
        
        .phone
            width 100%
            height 1rem
            display flex
            align-items flex-end
            justify-content space-between
            border-bottom .02rem solid #fff
            padding-bottom .2rem
            .icon-phone
                font-size 1rem
                color white
            .icon-message
                font-size 1rem
                color white
            .input-box 
                position relative
                .phone-input
                    width 4.5rem
                    background transparent
                    font-size .45rem
                    margin-left .1rem
                    color #fff
            .phone-input::placeholder
                color white
            .get-btn
                width 2.6rem
                height 1rem
                flex-shrink 0
                font-size .4rem
                margin-left .1rem
                background $buttonTrColor
                color white
                border-radius .08rem
        .login-submit
                margin-top .5rem
                background $buttonTrColor
                
                

            
</style>


